import React, { useState } from 'react';
import { Form, Input, Button, Card, Row, Col, Upload, Typography, Divider, Select, message } from 'antd';
import { UploadOutlined, PictureOutlined } from '@ant-design/icons';
import axios from 'axios';

const { TextArea } = Input;
const { Title, Paragraph } = Typography;
const { Option } = Select;

interface ImageGenerationForm {
  theme: string;
  description: string;
  style: string;
  size: string;
}

interface GeneratedImage {
  url: string;
  alt: string;
}

const ImageGenerator: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [images, setImages] = useState<GeneratedImage[]>([]);

  const handleSubmit = async (values: ImageGenerationForm) => {
    try {
      setLoading(true);
      const response = await axios.post('/api/generate-images', values);
      
      setImages(response.data.images || []);
      message.success('配图生成成功！');
    } catch (error) {
      console.error('Error generating images:', error);
      message.error('配图生成失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  // 示例图片数据
  const sampleImages = [
    { url: 'https://placehold.co/600x400/png', alt: '示例图片1' },
    { url: 'https://placehold.co/600x400/png', alt: '示例图片2' },
    { url: 'https://placehold.co/600x400/png', alt: '示例图片3' },
    { url: 'https://placehold.co/600x400/png', alt: '示例图片4' },
  ];

  return (
    <div>
      <Title level={2}>智能配图生成</Title>
      <Divider />
      
      <Form 
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        initialValues={{
          style: 'realistic',
          size: 'square'
        }}
      >
        <Form.Item
          name="theme"
          label="主题"
          rules={[{ required: true, message: '请输入配图主题' }]}
        >
          <Input placeholder="例如：产品展示、团队活动、品牌故事等" />
        </Form.Item>
        
        <Form.Item
          name="description"
          label="详细描述"
          rules={[{ required: true, message: '请描述你想要的图片内容' }]}
        >
          <TextArea 
            rows={4} 
            placeholder="详细描述你想要的图片内容、氛围、元素等"
          />
        </Form.Item>
        
        <Form.Item name="style" label="图片风格">
          <Select>
            <Option value="realistic">写实风格</Option>
            <Option value="cartoon">卡通风格</Option>
            <Option value="abstract">抽象艺术</Option>
            <Option value="minimalist">极简主义</Option>
          </Select>
        </Form.Item>
        
        <Form.Item name="size" label="图片尺寸">
          <Select>
            <Option value="square">正方形 (1:1)</Option>
            <Option value="portrait">竖版 (4:5)</Option>
            <Option value="landscape">横版 (16:9)</Option>
            <Option value="story">故事流 (9:16)</Option>
          </Select>
        </Form.Item>
        
        <Form.Item>
          <Button type="primary" htmlType="submit" loading={loading} icon={<PictureOutlined />}>
            生成配图
          </Button>
        </Form.Item>
      </Form>
      
      <Divider />
      
      <div>
        <Title level={3}>生成结果</Title>
        <Row gutter={[16, 16]}>
          {(images.length > 0 ? images : sampleImages).map((image, index) => (
            <Col span={12} key={index}>
              <Card
                hoverable
                cover={<img alt={image.alt} src={image.url} style={{ objectFit: 'cover', height: 200 }} />}
                actions={[
                  <Button key="download" type="link">下载</Button>,
                  <Button key="share" type="link">分享</Button>
                ]}
              >
                <Card.Meta title={`配图 ${index + 1}`} description={image.alt} />
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
};

export default ImageGenerator; 